<#include "common/resource.ftl" />
</head>

<!-- body classes:
        "boxed": boxed layout mode e.g. <body class="boxed">
        "pattern-1 ... pattern-9": background patterns for boxed layout mode e.g. <body class="boxed pattern-1">
-->
<body>
<!-- scrollToTop -->
<!-- ================ -->
<div class="scrollToTop"><i class="icon-up-open-big"></i></div>

<!-- page wrapper start -->
<!-- ================ -->
<div class="page-wrapper">

    <!-- header-top start -->
    <!-- ================ -->
    <#include  "common/top-header.ftl"  />
    <!-- header-top end -->

    <!-- header start (remove fixed class from header in order to disable fixed navigation mode) -->
    <!-- ================ -->
    <#include "common/header.ftl" />
    <!-- header end -->

    <!-- page-intro start-->
    <!-- ================ -->
    <div class="page-intro">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ol class="breadcrumb">
                        <li><i class="fa fa-home pr-10"></i><a href="/blog/list"> <@spring.message "Blog" /> </a></li>
                        <li class="active"> <@spring.message "BlogDetails" /> </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- page-intro end -->

    <!-- main-container start -->
    <!-- ================ -->
    <section class="main-container">

        <div class="container">
            <div class="row">

                <!-- main start -->
                <!-- ================ -->
                <div class="main col-md-8">

                    <!-- page-title start -->
                    <!-- ================ -->
                    <h1 class="page-title">${blog.title}</h1>
                    <!-- page-title end -->

                    <!-- blogpost start -->
                    <article class="clearfix blogpost full">
                        <div class="blogpost-body">
                            <div class="side">
                                <div class="post-info">
                                    <span class="day">${blog.createTime?string("dd")}</span>
                                    <span class="month"> ${blog.createTime?string("YYYY-MM")} </span>
                                </div>
                                <div id="affix"><span class="share">Share This</span><div id="share"></div></div>
                            </div>
                            <div class="blogpost-content">
                                <header>
                                    <div class="submitted"><i class="fa fa-user pr-5"></i> by <a href="#">John Doe</a></div>
                                </header>
                                <div class="owl-carousel content-slider-with-controls">
                                    <#--<div class="overlay-container">-->
                                        <#--<img src="/resource/home/images/blog-1.jpg" alt="">-->
                                        <#--<a href="/resource/home/images/blog-1.jpg" class="popup-img overlay" title="image title"><i class="fa fa-search-plus"></i></a>-->
                                    <#--</div>-->
                                    <#--<div class="overlay-container">-->
                                        <#--<img src="/resource/home/images/blog-2.jpg" alt="">-->
                                        <#--<a href="/resource/home/images/blog-2.jpg" class="popup-img overlay" title="image title"><i class="fa fa-search-plus"></i></a>-->
                                    <#--</div>-->

                                    <#assign thumb =  '/resource/home/images/blog-2.jpg' />
                                    <#if blog.thumb?exists && blog.thumb !='' >
                                       <#assign thumb =  imageService + thumb />
                                    </#if>

                                    <div class="overlay-container">
                                        <img src="${thumb}" alt="">
                                        <a href="${thumb}" class="popup-img overlay" title=""><i class="fa fa-search-plus"></i></a>
                                    </div>
                                </div>
                                <p> ${blog.content} </p>
                            </div>
                        </div>
                        <footer class="clearfix">
                            <ul class="links pull-left">
                                <li><i class="fa fa-comment-o pr-5"></i> <a href="#">${blog.comment} <@spring.message "Comments" /> </a> |</li>
                                <#--<li><i class="fa fa-tags pr-5"></i> <a href="#">tag 1</a>, <a href="#">tag 2</a>, <a href="#">long tag 3</a> </li>-->
                                <li><i class="fa fa-eye pr-5"></i> <a href="#"> <@spring.message "View" />  ${blog.view} </li>
                            </ul>
                        </footer>
                    </article>
                    <!-- blogpost end -->

                    <!-- comments start -->
                    <div class="comments">
                        <h2 class="title">There are 3 comments</h2>

                        <div class="comment clearfix">
                            <div class="comment-avatar">
                                <img src="images/avatar.jpg" alt="avatar">
                            </div>
                            <div class="comment-content">
                                <h3>Comment title</h3>
                                <div class="comment-meta">By <a href="#">admin</a> | Today, 12:31</div>
                                <div class="comment-body clearfix">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo </p>
                                    <a href="blog-post.html" class="btn btn-gray more pull-right"><i class="fa fa-reply"></i> <@spring.message "Reply" /> </a>
                                </div>
                            </div>


                            <div class="comment clearfix">
                                <div class="comment-avatar">
                                    <img src="images/avatar.jpg" alt="avatar">
                                </div>
                                <div class="comment-content clearfix">
                                    <h3>Comment title</h3>
                                    <div class="comment-meta">By <a href="#">admin</a> | Today, 12:31</div>
                                    <div class="comment-body">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo </p>
                                        <a href="blog-post.html" class="btn btn-gray more pull-right"><i class="fa fa-reply"></i> <@spring.message "Reply" /></a>
                                    </div>
                                </div>
                            </div>


                        </div>


                        <div class="comment clearfix">
                            <div class="comment-avatar">
                                <img src="images/avatar.jpg" alt="avatar">
                            </div>
                            <div class="comment-content clearfix">
                                <h3>Comment title</h3>
                                <div class="comment-meta">By <a href="#">admin</a> | Today, 12:31</div>
                                <div class="comment-body">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo </p>
                                    <a href="blog-post.html" class="btn btn-gray more pull-right"><i class="fa fa-reply"></i> <@spring.message "Reply" /></a>
                                </div>
                            </div>
                        </div>
                        <!-- comment end -->

                    </div>
                    <!-- comments end -->

                    <!-- comments form start -->
                    <div class="comments-form">
                        <h2 class="title"><@spring.message "AddYourComment" /></h2>
                        <form role="form" id="comment-form">
                            <div class="form-group has-feedback">
                                <label for="name4">Name</label>
                                <input type="text" class="form-control" id="name4" placeholder="" name="name4" required>
                                <i class="fa fa-user form-control-feedback"></i>
                            </div>
                            <div class="form-group has-feedback">
                                <label for="subject4">Subject</label>
                                <input type="text" class="form-control" id="subject4" placeholder="" name="subject4" required>
                                <i class="fa fa-pencil form-control-feedback"></i>
                            </div>
                            <div class="form-group has-feedback">
                                <label for="message4"><@spring.message "YourComment" /></label>
                                <textarea class="form-control" rows="8" id="message4" placeholder="" name="message4" required></textarea>
                                <i class="fa fa-envelope-o form-control-feedback"></i>
                            </div>
                            <input type="submit" value="<@spring.message 'Submit' />" class="btn btn-default">
                        </form>
                    </div>
                    <!-- comments form end -->

                </div>
                <!-- main end -->

                <!-- sidebar start -->
                <aside class="col-md-3 col-md-offset-1">
                    <div class="sidebar">
                        <div class="block clearfix">
                            <h3 class="title"> <@spring.message "AllCategories" /> </h3>
                            <div class="separator"></div>
                            <nav>
                                <ul class="nav nav-pills nav-stacked">
                                    <#--<li><a href="/index"> <@spring.message "Home" /> </a></li>-->
                                    <#--<li class="active"><a href="/blog/list"> <@spring.message "Blog" /> </a></li>-->
                                    <#--<li><a href="">Portfolio</a></li>-->
                                    <#--<li><a href="/index/about"> <@spring.message "About" /> </a></li>-->
                                    <li class="" ><a href="/blog/list"> <@spring.message "AllCategories" /></a></li>
                                    <#list categoryList as category >
                                        <li <#if category.id == blog.categoryId >class="active" </#if>  ><a href="/blog/list?categoryId=${category.id}"> ${category.title} </a></li>
                                    </#list>

                                </ul>
                            </nav>
                        </div>
                        <#--<div class="block clearfix">-->
                            <#--<h3 class="title">Latest tweets</h3>-->
                            <#--<div class="separator"></div>-->
                            <#--<ul class="tweets">-->
                                <#--<li>-->
                                    <#--<i class="fa fa-twitter"></i>-->
                                    <#--<p><a href="#">@lorem</a> ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, aliquid, et molestias nesciunt <a href="#">http://t.co/dzLEYGeEH9</a>.</p><span>16 hours ago</span>-->
                                <#--</li>-->
                                <#--<li>-->
                                    <#--<i class="fa fa-twitter"></i>-->
                                    <#--<p><a href="#">@lorem</a> ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, aliquid, et molestias nesciunt <a href="#">http://t.co/dzLEYGeEH9</a>.</p><span>16 hours ago</span>-->
                                <#--</li>-->
                            <#--</ul>-->
                        <#--</div>-->
                        <div class="block clearfix">
                            <h3 class="title"> <@spring.message "RecommendedThisWeek" /> </h3>
                            <div class="separator"></div>

                            <div class="image-box">
                                <div class="overlay-container">
                                    <img src="images/blog-sidebar.jpg" alt="">
                                    <div class="overlay">
                                        <div class="overlay-links">
                                            <a href="blog-post.html"><i class="fa fa-link"></i></a>
                                            <a href="images/blog-sidebar.jpg" class="popup-img-single" title="image title"><i class="fa fa-search-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="image-box-body">
                                    <h3 class="title"><a href="blog-post.html">Post Title</a></h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                                    <a href="blog-post.html" class="link"><span> <@spring.message "ReadMore" /> </span></a>
                                </div>
                            </div>
                        </div>

                        <#---->
                        <#--<div class="block clearfix">-->
                            <#--<h3 class="title">Text Sample</h3>-->
                            <#--<div class="separator"></div>-->
                            <#--<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, nemo, necessitatibus, expedita voluptate esse ipsam aliquid blanditiis maxime sequi veniam suscipit atque sapiente cum voluptatum quos mollitia laborum? Esse, officia!</p>-->
                        <#--</div>-->
                        <#--<div class="block clearfix">-->
                            <#--<h3 class="title">Testimonial</h3>-->
                            <#--<div class="separator"></div>-->
                            <#--<blockquote class="margin-clear">-->
                                <#--<p>Design is not just what it looks like and feels like. Design is how it works.</p>-->
                                <#--<footer><cite title="Source Title">Steve Jobs </cite></footer>-->
                            <#--</blockquote>-->
                            <#--<blockquote class="margin-clear">-->
                                <#--<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolorem.</p>-->
                                <#--<footer><cite title="Source Title">Steve Doe </cite></footer>-->
                            <#--</blockquote>-->
                        <#--</div>-->

                        <!--
                        <div class="block clearfix">
                            <h3 class="title">Portfolio</h3>
                            <div class="separator"></div>
                            <div class="gallery row">
                                <div class="gallery-item col-xs-4">
                                    <div class="overlay-container">
                                        <img src="/resource/home/images/gallery-1.jpg" alt="">
                                        <a href="portfolio-item.html" class="overlay small">
                                            <i class="fa fa-link"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="gallery-item col-xs-4">
                                    <div class="overlay-container">
                                        <img src="/resource/home/images/gallery-2.jpg" alt="">
                                        <a href="portfolio-item.html" class="overlay small">
                                            <i class="fa fa-link"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="gallery-item col-xs-4">
                                    <div class="overlay-container">
                                        <img src="/resource/home/images/gallery-3.jpg" alt="">
                                        <a href="portfolio-item.html" class="overlay small">
                                            <i class="fa fa-link"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="gallery-item col-xs-4">
                                    <div class="overlay-container">
                                        <img src="/resource/home/images/gallery-4.jpg" alt="">
                                        <a href="portfolio-item.html" class="overlay small">
                                            <i class="fa fa-link"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="gallery-item col-xs-4">
                                    <div class="overlay-container">
                                        <img src="/resource/home/images/gallery-5.jpg" alt="">
                                        <a href="portfolio-item.html" class="overlay small">
                                            <i class="fa fa-link"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="gallery-item col-xs-4">
                                    <div class="overlay-container">
                                        <img src="/resource/home/images/gallery-6.jpg" alt="">
                                        <a href="portfolio-item.html" class="overlay small">
                                            <i class="fa fa-link"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        -->
                        <div class="block clearfix">
                            <h3 class="title"> <@spring.message "Tags" /> </h3>
                            <div class="separator"></div>
                            <div class="tags-cloud">
                                <div class="tag">
                                    <a href="#">energy</a>
                                </div>
                                <div class="tag">
                                    <a href="#">business</a>
                                </div>
                                <div class="tag">
                                    <a href="#">food</a>
                                </div>
                                <div class="tag">
                                    <a href="#">fashion</a>
                                </div>
                                <div class="tag">
                                    <a href="#">finance</a>
                                </div>
                                <div class="tag">
                                    <a href="#">culture</a>
                                </div>
                                <div class="tag">
                                    <a href="#">health</a>
                                </div>
                                <div class="tag">
                                    <a href="#">sports</a>
                                </div>
                                <div class="tag">
                                    <a href="#">life style</a>
                                </div>
                                <div class="tag">
                                    <a href="#">books</a>
                                </div>
                            </div>
                        </div>
                        <div class="block clearfix">
                            <form role="search">
                                <div class="form-group has-feedback">
                                    <input type="text" class="form-control" placeholder="<@spring.message 'Search' />">
                                    <i class="fa fa-search form-control-feedback"></i>
                                </div>
                            </form>
                        </div>
                    </div>
                </aside>
                <!-- sidebar end -->

            </div>
        </div>
    </section>
    <!-- main-container end -->

    <#include "common/footer.ftl" />

    <!-- footer end -->

</div>

<#include  "common/end-script.ftl" />
</body>
</html>
